﻿// Our default grid options
var defaultGridOptions = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    enableAddRow: false,
    editable: true,
    editOnDoubleClick: true,
    multiSelect: false,
    forceFitColumns: false,
    autoHeight: false,
    resizable: false,
    autoEdit: false,
    showHeaderRow: true,
    rowHeight: 36,
    headerHeight: 36,
    headerRowHeight: 36

};


// This function will run when the document has finished loading (not including images).
$().ready(function () {
    var grid = SetUpAvailabilityGrid();
    $('.button').button();
    $.getJSON("/employeeprofile/get", function (response) {
        if (response.Result) {
            $("#employeeInformation input").each(function (i, element) {
                if (element.name in response.Data)
                    element.value = response.Data[element.name];
            });
            response.Data.AvailableTimes.Id = 0;
            grid.dataView.addItem(response.Data.AvailableTimes);
            grid.invalidate();
        }

    });
    $("#SaveInformation").click(function (e) {
        e.preventDefault();
        block({ element: $("#employeeInformationForm"), text: "Saving" });
        $.post("/employeeprofile/save", extractFormData($("#employeeInformationForm")) , function (response) {
            if (!response.Result)
                alert("Saving Error " + response.Data);
        }
      ).complete(function () {
          unblock({ element: $("#employeeInformationForm") });
      });


    })

});

    function SetUpAvailabilityGrid() { // First, define the grid's columns
        var columns = [
        { id: "Monday", name: "Monday", field: "Monday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Tuesday", name: "Tuesday", field: "Tuesday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Wednesday", name: "Wednesday", field: "Wednesday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Thursday", name: "Thursday", field: "Thursday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Friday", name: "Friday", field: "Friday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Saturday", name: "Saturday", field: "Saturday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Sunday", name: "Sunday", field: "Sunday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" }
    ];
        function hoursFormatter(row, cell, value) {
            return "<div><p>" + (value ? value : "N/A") + "</p></div>";
        }
        // Set some additional options
        var options = $.extend(true, {}, defaultGridOptions);
        options.hasHeaderFilters = true;
        
        // Create the grid
        var $gridSelector = $("#availabilityGrid");
        var grid = new Slick.Grid($gridSelector, [], columns, options);
        grid.registerPlugin(new Slick.ExtendedGrid($gridSelector, columns, options));

        grid.updateHeaderRow();
     

        //    // Return the grid object so we can store it in a variable
        return grid;
    
}